<template>
  <el-button @click="saveData">预览</el-button>
  <div id="action_2_9_2_main_customevent" style="width: 100%; height: 100%"></div>
  <el-dialog v-model="dialogPreview" title="报表预览" width="1980">
    <action_2_9_2_card_custom-event  @xxx="handle"></action_2_9_2_card_custom-event>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogPreview = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">


import {onMounted, ref,reactive} from "vue";
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
const handle = (previewcall) => {
  console.log("action_2_9_2_main_customevent handle is called")
  //spreadSheet.update(sheetDesign.getData().config, sheetDesign.getData().data);
  previewcall(sheetDesign.getData().config, sheetDesign.getData().data,_onUpdateDatasetList);
}
const onSubmit = () => {
  console.log('onsubmit')
}
import config2 from "./action_2_8.config.json"
import data2 from "./action_2_8.data.json"
import _onUpdateDatasetList from "./action_2_8.onUpdateDatasetList.json"
import Action_2_9_2_card_customEvent from "@/views/inAction/action_2/action_2_9_2_card_customEvent.vue";
// 注意奇怪抛异常：  可能是版本的原因，如果是从官网下载的json数据，一般都是json数据集设计的，此时回显，必须把type=4====》type=1
// action_3.data.json的数据非常的特殊，B产品1/2/3/4季度有各2条数据，汇总看不出来；
const usePreStore = usePreviewStore();
const dialogPreview = ref(false);
let money = ref(10000)
let config=[];
let data=[];

const dataset = [ //  添加数据集按钮
  { //Json数据
    id: 1,
    value: "新建Json数据集"
  },
  { //http请求数据
    id: 2,
    value: "新建Http接口数据集"
  },
  { //API服务数据
    id: 3,
    value: "API服务数据集"
  },
  {
    id: 4,
    value: "外部数据集"
  }
];
const options = {
  row: 100,
  col: 25,
  width: () => document.documentElement.clientWidth,
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  dataset
}
options.onUpdateDatasetList =  () => {
  return new Promise((resolve, reject) => {
    resolve(_onUpdateDatasetList);
  })
}

// 该方法的返回值是一个Promise
const onUpdateData = (datasets, params) => {
  console.log("..action_2_9_2_main_customevent.vue....datasets:", datasets);
  console.log("..action_2_9_2_main_customevent.vue....params:", params);
  return new Promise((resolve, reject) => {
    resolve([]);
  })
}
options.onUpdateData = onUpdateData

const loadData = () => {

  sheetDesign.loadData({config: config2, data: data2});

}

const on_dataset_edited = (dataset)=>{
  console.log("...dataset_edited...,dataset:",dataset);
}
// 绑定授权码
//XZReport.setKey(授权码)  //可以在localhost/127.0.0.1环境下使用
let sheetDesign;
onMounted(() => {
  sheetDesign = XZReportDesigner("#action_2_9_2_main_customevent", options);
  sheetDesign.loadData({config: config2});
  // 监听 编辑数据集事件
  sheetDesign.on("dataset-edited",on_dataset_edited);
})

function saveData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  config = sheetDesign.getData().config; //报表设计器的保存事件
  data = sheetDesign.getData().data; //报表设计器的保存事件

  dialogPreview.value=true
}


</script>


